﻿@clm-width: 40px;
@clm-spacing: 10px;
@clm-number: 16;

.container {
    position: relative;
    width: (@clm-width + @clm-spacing*2 )* @clm-number;
    margin: 0 auto;
    clear: both;
    padding: 0;
}

    .container .column,
    .container .columns {
        min-height: 100%;
        float: left;
        display: inline;
        margin-left: 10px;
        margin-right: 10px;
    }

.clm-n(@clm-width, @n) {
    .clm-n(@clm-width, @n, 0)
}
.clm-n(@clm-width, @n, @rm) {
    width: @clm-width * @n + @clm-spacing * 2 * (@n - 1) - @rm;
}

.row {
    margin-bottom: 20px;
}

/* Nested Column Classes */
.column.alpha, .columns.alpha {
    margin-left: 0;
}

.column.omega, .columns.omega {
    margin-right: 0;
}

/* Base Grid */
.container .one.column,
.container .one.columns {
    .clm-n(@clm-width, 1);
}

.container .two.columns {
    .clm-n(@clm-width, 2);
}

.container .three.columns {
    .clm-n(@clm-width, 3);
}

.container .four.columns {
    .clm-n(@clm-width, 4);
}

.container .five.columns {
    .clm-n(@clm-width, 5);
}

.container .six.columns {
    .clm-n(@clm-width, 6);
}

.container .seven.columns {
    .clm-n(@clm-width, 7);
}

.container .eight.columns {
    .clm-n(@clm-width, 8);
}

.container .nine.columns {
    .clm-n(@clm-width, 9);
}

.container .ten.columns {
    .clm-n(@clm-width, 10);
}

.container .eleven.columns {
    .clm-n(@clm-width, 11);
}

.container .twelve.columns {
    .clm-n(@clm-width, 12);
}

.container .thirteen.columns {
    .clm-n(@clm-width, 13);
}

.container .fourteen.columns {
    .clm-n(@clm-width, 14);
}

.container .fifteen.columns {
    .clm-n(@clm-width, 15);
}

.container .sixteen.columns {
    .clm-n(@clm-width, 16);
}

.offset-by(@clm-width, @n)
{
    padding-left: @clm-width * @n + @clm-spacing * 2 * @n;
}

.container .offset-by-one                   { .offset-by(@clm-width, 1) }
.container .offset-by-two                   { .offset-by(@clm-width, 2) }
.container .offset-by-three                 { .offset-by(@clm-width, 3) }
.container .offset-by-four                  { .offset-by(@clm-width, 4) }
.container .offset-by-five                  { .offset-by(@clm-width, 5) }
.container .offset-by-six                   { .offset-by(@clm-width, 6) }
.container .offset-by-seven                 { .offset-by(@clm-width, 7) }
.container .offset-by-eight                 { .offset-by(@clm-width, 8) }
.container .offset-by-nine                  { .offset-by(@clm-width, 9) }
.container .offset-by-ten                   { .offset-by(@clm-width, 10) }
.container .offset-by-eleven                { .offset-by(@clm-width, 11) }
.container .offset-by-twelve                { .offset-by(@clm-width, 12) }
.container .offset-by-thirteen              { .offset-by(@clm-width, 13) }
.container .offset-by-fourteen              { .offset-by(@clm-width, 14) }
.container .offset-by-fifteen               { .offset-by(@clm-width, 15) }

.fl {
    float: left;
}

.fr {
    float: right;
}

.container:after {
    content: "\0020";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
    content: '\0020';
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

.row:after,
.clearfix:after {
    clear: both;
}

.row,
.clearfix {
    zoom: 1;
}

.clear, .cl {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}
